<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" label-width="100px">
        <el-row class="search-input">
          <el-form-item label="退款编码：">
            <el-input v-model="filters.returnCode" clearable maxlength="80" placeholder="退款编码"></el-input>
          </el-form-item>
          <el-form-item label="订单编号：">
            <el-input v-model="filters.orderNo" placeholder="订单编号" maxlength="80" clearable></el-input>
          </el-form-item>
          <el-form-item label="退款状态：">
            <el-select v-model="filters.returnStatus" placeholder="全部" style="width: 200px;">
              <el-option label="未退款" value="1">未退款</el-option>
              <el-option label="已退款" value="2">已退款</el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(filters)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              @click="reset"
              type="primary"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!--表格内容栏-->
    <cy-table
      :operationWidth="300"
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showSelection="false"
      :showDetailOperation="false"
      :showEditOperation="false"
      :showOperation="false"
      @findPage="findPage"
      ref="CyTable"
    ></cy-table>
  </div>
</template>


<script>
  import CyTable from "@/views/Core/JicTable";
  import KtButton from "@/views/Core/KtButton";

  export default {
    components: {
      CyTable,
      KtButton,
    },
    data() {
      return {
        totalSize: 0,
        size: "small",
        filters: {
          returnCode: "",
          orderNo: "",
          returnStatus: ""
        },
        columns: [
          {prop: "orderNo", label: "订单编号", minWidth: 120},
          {prop: "returnCode", label: "退款编码", minWidth: 120},
          {
            prop: "returnStatus", label: "退款状态", minWidth: 120, formatter: function (row, column, cellValue, index) {
              if (cellValue == 1) {
                return "未退款";
              } else {
                return "已退款";
              }
            }
          },
          {
            prop: "createTime",
            label: "退款时间",
            minWidth: 150
          },

          {prop: "returnAccount", label: "用户申请退款金额", minWidth: 120},

          {
            prop: "returnReason",
            label: "退款原因",
            minWidth: 120,
            formatter: this.location
          },
          {prop: "returnVoucher", label: "退款凭证", minWidth: 120},
          {prop: "paySerialNo", label: "支付流水号", minWidth: 120},
          {prop: "paySerialNos", label: "所属平台", minWidth: 120},
        ],
        dateForm:[{
          orderNo: "123416502QSLKJFLKSD",
          returnCode: "Q5261A257Z120",
          returnStatus: 1,
          createTime:new Date(),
          returnAccount: 2000,
          returnReason:"测试环境",
          returnVoucher: "测试环境",
          paySerialNo: 20000,
          paySerialNos: 40000,

        }],
        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {}
      };
    },
    methods: {
      // 获取分页数据
      findPage: function (data) {
        let this_ = this;
        if (this_.filters == undefined || this_.filters == "") {
          this_.filters = {};
        }
        this_.filters.pageNum = this.pageRequest.pageNum;
        this_.filters.pageSize = this.pageRequest.pageSize;
        this.utils.request.getOrderReturn(this_.filters, function (res) {
          if (res.data.rows.length == 0) {
            this_.$message({message: "查询暂无数据", type: "warning"});
          }
          this_.$refs.CyTable.findPage({
            content: res.data.rows,
            total: res.data.total
          });
        });
      },
      // 处理表格列过滤显示
      initColumns: function () {
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },
      reset: function () {
        if (this.filters.returnCode == ""
          && this.filters.orderNo == "" && this.filters.returnStatus == ""
        ) {
          this.$message({message: "请输入查询条件", type: "warning"});
          return false
        }
        this.filters = {
          returnCode: "",
          orderNo: "",
          returnStatus: ""
        };
        this.findPage();
      },
    },
    mounted() {
      this.initColumns();
    }
  };
</script>

<style scoped lang='scss'>
  /deep/  .el-input__inner  {
        width: 200px;
  }

   .el-form-item--mini.el-form-item,
   .el-form-item--small.el-form-item  {
        margin-bottom: 10px;
  }
</style>
